<!doctype html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width" />
    <meta name="distribution" content="global" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="author" content="Huei Tan" />
    <meta name="publisher" content="Huei Tan" />
    <meta name="rating" content="general" />
    <meta name="robots" content="all" />
    <meta name="spiders" content="all" />
    <meta name="webcrawlers" content="all" />

    <meta name="company" content="angular-validation" />
    <meta name="abstract" content="Client-side Validation for AngularJS" />
    <!-- <link rel="SHORTCUT ICON" type="image/x-icon" href="/images/favicon.ico" sizes="16x16 24x24 32x32 48x48 64x64" />
    <link rel="icon" type="image/x-icon" href="/images/favicon.ico" sizes="16x16 24x24 32x32 48x48 64x64" /> -->

    <meta name="subject" content="angular-validation" />
    <meta name="description" content="Client-side Validation for AngularJS" />
    <meta name="keywords" content="angular","angularjs","validation","angular validation","validator","client-side" />

    <meta property="og:title" content="angular-validation" />
    <meta property="og:url" content="http://huei90.github.io/angular-validation/" />
    <meta property="og:description" content="Client-side Validation for AngularJS" />
    <meta property="og:image" content="//avatars0.githubusercontent.com/u/2560096?v=3&s=460" />

    <title>Angular Validation</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"/>
    <!-- Bootstrap theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css"/>
    <!-- AngularJs ui-select CSS-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.2/select.min.css"/>

    <!-- Highlight CSS-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/monokai-sublime.min.css">

    <link rel="stylesheet" href="demo/main.css"/>

</head>

  <body role="document" ng-controller="index">
    <div class="container" style="padding-bottom: 20px;">
     <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Angular Validation</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#getting_started">Getting started</a></li>
            <li><a href="#style_guide">Style guide</a></li>
            <li><a href="#examples">Examples</a></li>
            <li><a href="https://github.com/huei90/angular-validation/blob/master/API.md" target="_blank">API</a></li>
            <li><a href="https://github.com/huei90/angular-validation/issues" target="_blank">Report an issue</a></li>
          </ul>
        </div>
      </div>
    </nav>
     <header class="bs-docs-header" tabindex="-1" id="#">
         <div class="hidden-xs" style="height: 40px;"></div>
          <div class="container">
            <h1>Angular Validation</h1>
            <p> Client-side Validation should be simple and clean. </p>
        </div>
      </header>
    <div class="container theme-showcase" role="main">
      <section id="getting_started">
        <div class="hidden-xs" style="height: 40px;"></div>
        <div class="page-header">
            <h2>Getting Started</h2>
        </div>
        <h3>Requirements</h3>
        <br/>
        <p><strong> AngularJS 1.2.x </strong>(for angular-validation 1.2.x)</p>
        <p><strong> AngularJS 1.3.x </strong>(for angular-validation 1.3.x)</p>
        <h3>Installation</h3>
        <br/>
        <div>
        <p>Install with npm</p>
        <pre><code>npm install angular-validation </code></pre>
        <p>Or with Bower</p>
        <pre><code>bower install angular-validation </code></pre>
        </div>
        <br/>
        <h3>Files to download</h3>
        <br/>
        <p>Add the files to your html</p>
        <pre><code>&lt;script src="dist/angular-validation.js"&gt;&lt;/script&gt;
&lt;script src="dist/angular-validation-rule.js"&gt;&lt;/script&gt;</code></pre>
        <p>If you are using Bower: </p>
        <pre><code>&lt;script src="lib/angular-validation/dist/angular-validation.js"&gt;&lt;/script&gt;
&lt;script src="lib/angular-validation/dist/angular-validation-rule.js"&gt;&lt;/script&gt;</code></pre>
        <pre><code>angular.module('yourApp', ['validation']);</code></pre>
         <p>Including your validation rule</p>
         <figure class="highlight">
            <pre class="javascript"><code>angular.module('yourApp', ['validation', 'validation.rule']);</code></pre>
         </figure>
         <br/>
         <h3>Writing your first code</h3>
         <figure class="highlight">
            <pre><code class="html">&lt;form name="Form"&gt;
        &lt;div class="row"&gt;
            &lt;div&gt;
                &lt;label&gt;Required&lt;/label&gt;
                &lt;input type="text" name="required" ng-model="form.required" validator="required"&gt;&lt;/div&gt;
                &lt;div&gt;
                    &lt;label&gt;Url&lt;/label&gt;
                    &lt;input type="text" name="url" ng-model="form.url" validator="required, url"&gt;
                &lt;/div&gt;
                &lt;button validation-submit="Form" ng-click="next()"&gt;Submit&lt;/button&gt;
                &lt;button validation-reset="Form"&gt;Reset&lt;/button&gt;
        &lt;/div&gt;
&lt;/form&gt;</code></pre>
         </figure>
    </section>

    <!-- ********Style guide******* -->

    <section id="style_guide">
        <div class="hidden-xs" style="height: 40px;"></div>
        <div class="page-header">
            <h2>Style Guide</h2>
        </div>
        <p>You can style different states of your form elements using the following selectors</p>
        <span class="label label-danger" style="margin-left: 2px;">Invalid Selectors</span>
        <figure class="highlight">
                <pre><code class="css">.ng-invalid.ng-dirty { /* Your style here */ }</code></pre>
        </figure>
        <span class="label label-success" style="margin-left: 2px;">Valid Selectors</span>
        <figure class="highlight">
                <pre><code class="css">.ng-valid.ng-dirty { /* Your style here */ }</code></pre>
        </figure>
        <br/>
        <p>
            You can also include your vendor libraries classes in you are using CSS preprocessors such as
            <a href="http://lesscss.org/">LESS</a> or
            <a href="http://sass-lang.com/">SASS</a>.
        </p>
         <span class="label label-info" style="margin-left: 2px;">Using Bootstrap classes</span>
        <figure class="highlight">
                <pre><code class="css">.ng-valid.ng-dirty { .has-error .form-control; }</code></pre>
        </figure>

        <br/>

        <p> For more on AngularJS validation classes check at their
            <a href="https://docs.angularjs.org/guide/forms">documentation</a>.
    </section>

    <!-- ********Examples******* -->
    <section id="examples">
      <div class="hidden-xs" style="height: 40px;"></div>
       <div class="page-header">
            <h2>Examples</h2>
        </div>
       <!--- Form1 -->
      <div class="page-header">
           <form name="Form" id="form1">
            <fieldset>
               <legend>Form ($watch)</legend>
               <div style="margin-bottom:20px;">
                <label for="email">Email</label>
                <input type="text" class="form-control"
                        name="emailWatch"
                        ng-model="form.email"
                        validator="email"
                        email-error-message="Error Email"
                        email-success-message="Good Email"
                        message-id="emailWatch"
                        id="email"/>
                    <span id="emailWatch"></span>


                    <label for="number">Number</label>
                    <input type="text" class="form-control"
                                name="numberWatch"
                                ng-model="form.number"
                                validator="number"
                                email-error-message="Error Number"
                                email-success-message="Good Number",
                                message-id="numberWatch"
                                id="number"/>
                <span id="numberWatch"></span>
               </div>

                <div class="btn-group" role="group">
                    <button class="btn btn-primary" ng-click="showcodewatch = !showcodewatch">
                    <span ng-hide="showcodewatch">Show Code</span>
                    <span ng-show="showcodewatch">Hide Code</span>
                    </button>
                </div>

                <pre ng-show="showcodewatch"><code class="html">&lt;!-- default valid-method is watch -->
&lt;input type="text" name="emailBlur" ng-model="form.email" validator="email"/></code></pre>
            </fieldset>
        </form>
      </div>
       <!--- Form2 -->
       <div class="page-header">
           <form name="Form" id="form2">
            <fieldset>
            <div class="m-b-20">
                <legend>Form ($blur)</legend>

                <label>Name</label>
                <input class="form-control" type="text" name="requireBlur" ng-model="form2.required" validator="required" valid-method="blur"/>

                <label>Email</label>
                <input class="form-control" type="text" name="emailBlur" ng-model="form2.email" validator="email" valid-method="blur"/>
            </div>
            <div class="btn-group" role="group">
                <button class="btn btn-primary" ng-click="showcodeblur = !showcodeblur">
                <span ng-hide="showcodeblur">Show Code</span>
                <span ng-show="showcodeblur">Hide Code</span>
                </button>
            </div>
            <pre ng-show="showcodeblur"><code class="html">&lt;input type="text" name="emailBlur" ng-model="form.email" validator="email" <span data-tooltip aria-haspopup="true" class="has-tip" title="valid method type set to blur">valid-method="blur"</span>/></code></pre>
            </fieldset>
        </form>
      </div>

      <!--- Form3 -->
       <div class="page-header">
          <form name="Form3" id="form3">
            <fieldset>
                <div class="m-b-20">
                    <legend>Form ($submit with callback)</legend>

                    <label>Required</label>
                    <input class="form-control" type="text" name="requireSubmit" ng-model="form3.required" validator="required" valid-method="submit" message-id="requireSubmit"/>
                    <span id="requireSubmit"></span>

                    <label>Url</label>
                    <input class="form-control" type="text" name="urlSubmit" ng-model="form3.url" validator="url" valid-method="submit" message-id="urlSubmit"/>
                    <span id="urlSubmit"></span>

                    <label>Email</label>
                    <input class="form-control" type="text" name="emailSubmit" ng-model="form3.email" validator="email" valid-method="submit" message-id="emailSubmit"/>
                    <span id="emailSubmit"></span>

                    <label>Number</label>
                    <input class="form-control" type="text" name="numberSubmit" ng-model="form3.number" validator="number" valid-method="submit" message-id="numberSubmit"/>
                    <span id="numberSubmit"></span>
                </div>
                <div class="btn-group" role="group">
                    <button class="btn btn-success" ng-click="form3.submit(Form3)">Submit</button>
                    <button class="btn btn-danger" ng-click="form3.reset(Form3)">Reset</button>
                    <button class="btn btn-info" ng-disabled="!form3.checkValid(Form3)">checkValid = {{ form3.checkValid(Form3) }}</button>
                </div>
            </fieldset>
        </form>
      </div>

      <!--- Form4 -->
       <div class="page-header">
          <form name="Form4" id="form4">
            <fieldset>
                <div class="m-b-20">
                    <legend>Form (Additions validation)</legend>
                    <div class="input-group m-b-20" style="width: 50%;">
                        <input type="text" class="form-control" validator="huei" name="huei" ng-model="form4.huei" placeholder="It's must be 'Huei Tan'" message-id="huei">
                        <span class="input-group-addon">With <a href="https://github.com/huei90/angular-validation#custom-function-huei" target="_blank">Function</a> </span>

                    </div>
                    <span id="huei"></span>

                    <div class="input-group m-b-20" style="width: 50%;">
                        <input type="text" class="form-control" validator="huei" name="noMsg" ng-model="form4.noMsg" no-validation-message="true" placeholder="It's must be 'Huei Tan'" message-id="noMsg">
                        <span class="input-group-addon">
                            <span ng-if="!Form4.noMsg.$valid">type: Huei Tan</span>
                            <span ng-if="Form4.noMsg.$valid"><a href="https://github.com/huei90/angular-validation#no-validation-message" target="_blank">no-validation-message</a></span>
                        </span>
                    </div>

                    <div class="input-group m-b-20" style="width: 50%;">
                        <input type="text" class="form-control" validator="huei" name="canChange" huei-error-message="{{ form4.changeErrorMsg }}" ng-model="form4.canChange" placeholder="Type Wrong !!" message-id="canChange">
                        <span class="input-group-addon">
                            <span ng-if="!form4.show"><a href="javascript:void(0);" ng-click="form4.changeMsg();form4.show = true;">Change Error Msg</a></span>
                            <span ng-if="form4.show">Type Again <a href="https://github.com/huei90/angular-validation/blob/master/demo/demo.js#L45" target="_blank">#</a></span>
                        </span>
                    </div>
                    <span id="canChange"></span>

                    <input type="text" class="form-control m-b-20" validator="range" name="range" ng-model="form4.range" placeholder="number 5~10" min="5" max="10" message-id="range">
                    <span id="range"></span>

                    <input type="text" class="form-control m-b-20" validator="required, range" name="multiple" ng-model="form4.multiple" placeholder='number 5~10 with required (validator="required, range")'  min="5" max="10" message-id="multiple">
                    <span id="multiple"></span>
                </div>
            </fieldset>
        </form>
      </div>

       <!--- Form5 -->
       <div class="page-header">
          <form name="Form5" id="form5">
            <fieldset>
                <div class="m-b-20">
                    <legend>Form ($submit-only)</legend>
                    <label>Required</label>
                    <input type="text" class="form-control m-b-20" name="emailRequiredOnly" ng-model="form5.required" validator="required" valid-method="submit-only" message-id="emailRequiredOnly"/>
                    <span id="emailRequiredOnly"></span>

                    <label>Email</label>
                    <input type="text" class="form-control m-b-20" name="emailSubmitOnly" ng-model="form5.email" validator="email" valid-method="submit-only" message-id="emailSubmitOnly"/>
                    <span id="emailSubmitOnly"></span>

                    <label>Lucky Number</label>
                    <select class="form-control" name="selectBlur" ng-model="form5.select" validator="required" message-id="selectBlur">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                    <span id="selectBlur"></span>

                    <div class="row">
                        <div class="checkbox">
                            <label for="checkbox1">
                                <input id="checkbox1" type="checkbox" name="checkBlur1" ng-model="form5.check1" validator="required" validation-group="checkBlur"/>
                                Checkbox 1
                            </label>
                        </div>
                        <div class="checkbox">
                            <label for="checkbox2">
                                <input id="checkbox2" type="checkbox" name="checkBlur2" ng-model="form5.check2" validator="required" validation-group="checkBlur"/>
                                Checkbox 2
                            </label>
                        </div>
                    </div>
                    <span id="checkBlur"></span>

                    <div class="radio">
                             <input id="radio1" type="radio" name="radioBlur" ng-model="form5.radio" validator="required" message-id="checkRadio" value="1"/>
                             <label for="radio1">Radio 1</label>
                    </div>
                    <span id="checkRadio"></span>

                </div>
                <div class="btn-group" role="group">
                    <button class="btn btn-success" ng-click="form5.submit(Form5)">Submit</button>
                    <button class="btn btn-danger" ng-click="form5.reset(Form5)">Reset</button>
                    <button class="btn btn-info" ng-disabled="!form5.checkValid(Form5)">checkValid = {{ form5.checkValid(Form5) }}</button>
                </div>
            </fieldset>
        </form>
      </div>

      <!--- Form6 -->
       <div class="page-header">
          <form name="Form6" id="form6">
            <fieldset>
                <div class="m-b-20">
                    <legend>Form (ng-repeat)</legend>
                    <label>Required</label>
                    <div ng-repeat="a in form6.required">
                        <input type="text" class="form-control m-b-20" name="emailRequiredOnly{{$index}}" ng-model="a.required" validator="required" message-id="emailRequiredOnly{{$index}}"/>
                        <span id="emailRequiredOnly{{$index}}"></span>
                    </div>
                    <blockquote ng-non-bindable>
                        <label>In name attribute we have to use {{$index}}
                        <cite>eg. emailRequiredOnly{{$index}}</cite></label>
                    </blockquote>
                </div>
                <div class="btn-group" role="group">
                    <button class="btn btn-success" validation-submit="Form6">Submit</button>
                    <button class="btn btn-danger" validation-reset="Form6">Reset</button>
                    <button class="btn btn-info" ng-disabled="!form6.checkValid(Form6)">checkValid = {{ form6.checkValid(Form6) }}</button>
                </div>
            </fieldset>
        </form>
      </div>

      <!--- Form7 -->
       <div class="page-header">
          <form name="Form7" id="form7">
            <fieldset>
                <div class="m-b-20">
                    <legend>Bootstrap DatePicker</legend>
                    <label>Required</label>
                    <div>
                        <p class="input-group" style="width: 40%;">
                        <input type="text" class="form-control m-b-20" uib-datepicker-popup="dd-MMMM-yyyy" ng-model="form7.dt" is-open="form7.status.opened"  datepicker-options="form7.dateOptions" close-text="Close" validator="required" message-id="bootstrap"/>

                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default" ng-click="form7.open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                        </span>
                        </p>
                        <span id="bootstrap"></span>
                    </div>
                </div>
            </fieldset>
        </form>
      </div>

      <!--- Form8 -->
       <div class="page-header">
          <form name="Form8" id="form8">
            <fieldset>
                <div class="m-b-20">
                    <legend>AngularJs ui-select</legend>

                        <div class="row">
                            <div class="col-xs-12">
                                <label>Required, Selected: {{form8.country.selected}}</label>
                            </div>
                            <div class="col-xs-6">
                                <ui-select ng-model="form8.country.selected" theme="bootstrap"
                                        ng-disabled="form8.disabled"
                                        style="width: 100%;"
                                        validator="required"
                                        message-id="ui-select">
                                        <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
                                        <ui-select-choices repeat="country in form8.countries" refresh-delay="0">
                                        <span ng-bind-html="country.name"></span>
                                        <small ng-bind-html="country.code"></small>
                                        </ui-select-choices>
                                </ui-select>
                                <br/>
                                 <span id="ui-select"></span>

                            </div>
                            <div class="col-xs-4">
                                <button class="btn btn-primary" ng-click="form8.clear()">Clear ng-model</button>

                            </div>

                        </div>
                    </div>
                </div>

            </fieldset>
        </form>
      </div>

    </section>
 </div>
 </div>

<a href="https://github.com/huei90/angular-validation" target="_blank"><img src="demo/iconmonstr-github-10-icon-128.png" id="github-link" alt="Fork me on Github"/></a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.2/select.min.js"></script>

<script src="dist/angular-validation.js"></script>
<script src="dist/angular-validation-rule.js"></script>
<script src="demo/demo.js"></script>

<script>
  ((window.gitter = {}).chat = {}).options = {
    room: 'huei90/angular-validation'
  };
</script>
<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>

<script>
  hljs.initHighlightingOnLoad();
</script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-62825613-1', 'auto');
  ga('send', 'pageview');
</script>
<script>
   $(".nav a").on("click", function(){
        $(".nav").find(".active").removeClass("active");
        $(this).parent().addClass("active");
    });
</script>
  </body>
</html>
